<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>



<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">商品搜索</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字" oninput="querydata(this.value)">
                </div>
<!--                <button type="submit" class="btn btn-default">查询</button>-->
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>







<body>
<table class="table table-striped table-bordered table-hover">
    <thead>
        <th>商品id</th>
        <th>商品名</th>
        <th>商品价格</th>
        <th>商品描述</th>
        <th>商品图片</th>
        <th>商品状态</th>
        <th>商家id</th>
        <th>操作</th>
    </thead>
    <tbody id="goods-tbody">
    </tbody>
    <tfoot>
    <tr><td colspan="11" style="text-align: center">
        <button id="firstPage">首页</button>
        <button id="prevPage">上一页</button>
        <span id="pageInfo"></span>
        <button id="nextPage">下一页</button>
        <button id="lastPage">末页</button>
    </td></tr>
    </tfoot>
</table>
<script>
    var page = 1;
    var size = 10;
    var total = 0;
    var totalPage = 1;
    $(function(){
        loadGoods(page, size);
        $("#firstPage").click(function(){ if(page!==1){ page=1; loadGoods(page,size);} });
        $("#prevPage").click(function(){ if(page>1){ page--; loadGoods(page,size);} });
        $("#nextPage").click(function(){ if(page<totalPage){ page++; loadGoods(page,size);} });
        $("#lastPage").click(function(){ if(page!==totalPage){ page=totalPage; loadGoods(page,size);} });
    });
    function loadGoods(pageNum, pageSize){
        $.ajax({
            url: '/dwjmshop/allGoods', // 假设后端接口为/goods?page=1&size=10
            type: 'GET',
            data: { page: pageNum, size: pageSize },
            dataType: 'json',
            success: function(res){
                var goodsList = res.goods || res.data || [];
                total = res.total || res.count || 0;
                totalPage = Math.ceil(total/pageSize)||1;
                renderTable(goodsList);
                $("#pageInfo").text("第"+page+"页/共"+totalPage+"页");
            },
            error: function(){
                alert('获取商品数据失败');
            }
        });
    }
    function renderTable(goodsList){
        var html = '';
        for(var i=0;i<goodsList.length;i++){
            var g = goodsList[i];
            html += '<tr>'+
                '<td>'+g.id+'</td>'+
                '<td>'+g.title+'</td>'+
                '<td>'+g.price+'</td>'+
                '<td>'+g.description+'</td>'+
                '<td><img src="'+g.img+'" style="width:60px;height:60px;"></td>'+
                '<td>'+(g.state==0?'正常销售':g.state==1?'禁止销售':g.state)+'</td>'+
                '<td>'+g.mid+'</td>'+
                '<td><button class="btn btn-info btn-xs">查看</button> <button class="btn btn-warning btn-xs edit-btn">编辑</button> <button class="btn btn-danger btn-xs delete-btn" onclick="delRow">删除</button></td>'+
                '</tr>';
        }
        $("#goods-tbody").html(html);
        // 绑定删除事件
        $(".delete-btn").off('click').on('click', function(){
            var id = $(this).data('id');
            if(confirm('确定要删除该商品吗？')){
                $.ajax({
                    url: '/dwjmshop/deletegoods',
                    type: 'DELETE',
                    data: {id: id},
                    success: function(res){
                        alert('删除成功');
                        loadGoods(page, size);
                    },
                    error: function(){
                        alert('删除失败');
                    }
                });
            }
        });
    }

    function querydata(keyword){
        // console.log(1)
        $.ajax({
            url: '/dwjmshop/Querybycondition',
            type: 'get',
            data: {keyword: keyword},
            success: function(res){
                var goodsList = res.goods || res.data || [];
                total = res.total || res.count || 0;
                totalPage = Math.ceil(total/size)||1;
                renderTable(goodsList);
                $("#pageInfo").text("第"+page+"页/共"+totalPage+"页");
            }
        })

    }
</script>
</body>
</html>